<template>
  <ElButton v-if="utils.checkAuth('useradminadd')" @click="(dialogData.model = true), (dialogData.type = 'add')">添加</ElButton>
  <ElButton v-if="utils.checkAuth('useradminadd')" @click="updWxMenu()">更新公众号菜单</ElButton>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="id" width="280" />
    <el-table-column prop="name" label="菜单名称" />
    <el-table-column prop="pid_name" label="菜单父级" />
    <el-table-column prop="url" label="跳转地址" />

    <el-table-column label="是否显示">
      <template #default="scope">
        <el-tag type="success" v-if="scope.row.is_show==1">显示</el-tag>
        <el-tag type="danger" v-else>禁用</el-tag>
      </template>
    </el-table-column>
    
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small"
          @click="(dialogData.model = true), (dialogData.type = 'edit'), (dialogData.id = scope.row.id),(dialogData.key = new Date().getTime())" v-show="utils.checkAuth('useradminedit')">编辑</el-button>
        <el-button size="small" type="danger" @click="del(scope.row.id)" v-show="utils.checkAuth('useradmindel')" >删除</el-button>
      </template>
    </el-table-column>

  </el-table>
  <!-- 编辑添加组件 -->
  <el-dialog v-model="dialogData.model" :title="dialogData.type == 'add' ? '添加用户' : '编辑用户'" width="800">
    <MenuManage @item="close" :id="dialogData.id" :type="dialogData.type" :key="dialogData.key"></MenuManage>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { MenuList as lists, MenuDel as dels ,updateWxMenu} from '../../api/api';
import { ElButton } from "element-plus";
import { ElMessageBox, ElMessage } from 'element-plus'
import MenuManage from "./MenuManage.vue"
import { utils } from "@/api/utils.js";
const dialogData = ref({
  model: false,
  type: 'add',
  id: ''
})
const tableData = ref([])

onMounted(() => {
  console.log(12)
  loadList();
});
const loadList = () => {
  try {
    lists({}).then((res) => {
      console.log('res', res)
      tableData.value = res.data
    })

  } catch (error) {
    // 处理登录失败的情况
    console.error('error', error);
    // 可以在这里提示用户登录失败的信息
  }
};
const close = () => {
  dialogData.value = { model: false }
  loadList();
}


//删除
const del = (id) => {
  console.log(id)
  ElMessageBox.confirm(
    '确定删除数据吗?',
    '操作',
    {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      console.log(123)
      dels({id:id}).then((res) => {
        console.log('res', res)
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        loadList();

      })

    })
    .catch(() => {  
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })

}

//更新公众号菜单

const updWxMenu = () => {
  ElMessageBox.confirm(
    '确定更新公众号菜单吗?',
    '操作',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      console.log(123)
      updateWxMenu().then((res) => {
        console.log('res', res)
        ElMessage({
          type: 'success',
          message: '成功',
        })
        loadList();

      })

    })
    .catch(() => {  
      ElMessage({
        type: 'info',
        message: '取消',
      })
    })
}


</script>
